<template>
  <div>
    <template v-for="(data, index) in rowData">
      <div :key="index">
        <div class="user-base-info-box">
          <div class="descriptions-box">
            <el-descriptions :key="index" border style="margin-bottom: 20px" title="基础信息" :contentStyle="CS" :label-style="LS">
              <el-descriptions-item label="姓名">
                <p style="color: rgb(241, 10, 10);margin:0">
                  {{ data.fullName }}
                </p>
              </el-descriptions-item>

              <el-descriptions-item label="性别">{{
                data.gender
              }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{
                data.age
              }}</el-descriptions-item>
              <el-descriptions-item label="民族">{{
                data.ethnicity
              }}</el-descriptions-item>
              <el-descriptions-item label="学历">{{
                data.education
              }}</el-descriptions-item>
              <el-descriptions-item label="专业">{{
                data.major
              }}</el-descriptions-item>
              <el-descriptions-item label="身份证号码">{{
                data.idNumber
              }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{
                data.contactNumber
              }}</el-descriptions-item>
              <el-descriptions-item label="身份证家庭地址">{{
                data.homeAddress
              }}</el-descriptions-item>
              <el-descriptions-item label="实际居住地">{{
                data.residentialAddress
              }}</el-descriptions-item>

              <el-descriptions-item label="紧急联系人">{{
                data.emergencyContactPerson
              }}</el-descriptions-item>
              <el-descriptions-item label="紧急联系电话">{{
                data.emergencyContactNumber
              }}</el-descriptions-item>
              <el-descriptions-item label="是否住宿">{{
                data.accommodation
              }}</el-descriptions-item>
              <el-descriptions-item label="房间号">{{
                data.beddetail
              }}</el-descriptions-item>
              <el-descriptions-item label="是否外包人员">{{
                data.outsource
              }}</el-descriptions-item>
              <el-descriptions-item label="是否包吃" :span="2">{{
                data.freeMeal
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="user-avatar">
            <el-image style="width: 100px; height: 100px" :src="`http://112.4.224.59:8010${data.img}`"
              fit="fill"></el-image>
          </div>
        </div>

        <el-descriptions border style="margin-bottom: 20px" title="职务信息" :contentStyle="CS" :label-style="LS">
          <el-descriptions-item label="工号">
            {{ data.jobNumber }}
          </el-descriptions-item>
          <el-descriptions-item label="部门">{{
            data.department
          }}</el-descriptions-item>
          <el-descriptions-item label="入职时间">{{
            formatDateTime(data.entryDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="岗位">{{
            data.position
          }}</el-descriptions-item>

          <el-descriptions-item label="职务层级">{{
            data.positionLevel
          }}</el-descriptions-item>
          <el-descriptions-item label="技术职称">{{
            data.technicalTitle
          }}</el-descriptions-item>
          <el-descriptions-item span="4" label="福建籍管理员">{{
            data.fujianmanage
          }}</el-descriptions-item>

          <el-descriptions-item span="4" label="岗位变动情况">{{
            data.jobchange
          }}</el-descriptions-item>
          <el-descriptions-item span="4" label="二次入职的情况">{{
            data.secondemployment
          }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions border style="margin-bottom: 20px" title="保险信息" :contentStyle="CS" :label-style="LS">
          <el-descriptions-item label="是否缴纳农村医疗保险">{{
            data.ruralMedicalInsurance
          }}</el-descriptions-item>
          <el-descriptions-item label="是否签订放弃五险承诺书">{{
            data.waiveSocialInsurance
          }}</el-descriptions-item>
          <el-descriptions-item label="公积金缴纳时间">{{
            formatDateTimeYYMM(data.housingFundStartDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="太平洋保险">{{
            data.insurancePacific
          }}</el-descriptions-item>
          <el-descriptions-item label="中国人保保险">{{
            data.insuranceCpic
          }}</el-descriptions-item>
          <el-descriptions-item label="中国人寿保险">{{
            data.insuranceChinalife
          }}</el-descriptions-item>
          <el-descriptions-item label="五险">{{
            data.socialInsurance
          }}</el-descriptions-item>
          <el-descriptions-item label="参保时间">{{
            formatDateTimeYYMM(data.insuranceStartDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="退保时间">{{
            formatDateTimeYYMM(data.insuranceEndDate)
          }}</el-descriptions-item>



        </el-descriptions>

        <el-descriptions border style="margin-bottom: 20px" title="合同信息" :contentStyle="CS" :label-style="LS">
          <el-descriptions-item label="首次签订到期时间">{{
            formatDateTime(data.firstContractExpiryDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="二次签订到期时间">{{
            formatDateTime(data.secondContractExpiryDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="三次签订到期时间">{{
            formatDateTime(data.thirdContractExpiryDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="四次签订到期时间">{{
            formatDateTime(data.fourthContractExpiryDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="五次签订到期时间" :span="2">{{
            formatDateTime(data.fifthContractExpiryDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="合同续签备注" :span="3">{{
            data.contractRemarks
          }}</el-descriptions-item>

        </el-descriptions>
        <el-descriptions border style="margin-bottom: 20px" title="薪酬信息" :contentStyle="CS" :label-style="LS">
          <el-descriptions-item label="职级">{{
            data.employeeRank
          }}</el-descriptions-item>
          <el-descriptions-item label="职级工资">{{
            data.rankSalary
          }}</el-descriptions-item>
          <el-descriptions-item label="绩效档位">{{ data.performanceLevel }}</el-descriptions-item>
          <el-descriptions-item label="绩效金额">{{ data.performanceAmount }}</el-descriptions-item>
          <el-descriptions-item label="月押金额">{{ data.monthlyRent }}</el-descriptions-item>
          <el-descriptions-item label="技能工资">{{ data.skillSalary }}</el-descriptions-item>
          <el-descriptions-item label="个税补贴">{{ data.taxSubsidy }}</el-descriptions-item>

        </el-descriptions>
        <el-descriptions border style="margin-bottom: 20px" title="离职信息" :contentStyle="CS" :label-style="LS">
          <el-descriptions-item label="离职时间">{{
            formatDateTime(data.departureDate)
          }}</el-descriptions-item>
          <el-descriptions-item label="离职情况">{{
            data.departureStatus
          }}</el-descriptions-item>
          <el-descriptions-item label="离职原因">{{
            data.departureReason
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions border style="margin-bottom: 20px" title="备注" :contentStyle="CS" :label-style="LS">
          <el-descriptions-item span="4" label="无犯罪记录证明">{{
            data.crime
          }}</el-descriptions-item>
          <el-descriptions-item span="4"  label="备注"> {{
            data.remarks
          }}</el-descriptions-item>
      
        </el-descriptions>
      </div>
    </template>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: "Detail",
  data() {
    return {
      CS: {
        'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      LS: {
        'color': '#000',
        'text-align': 'center',
        'font-weight': '600',
        'height': '40px',
        
        'width': '70px',
        'word-break': 'keep-all'
      }

    }
  },
  props: {
    rowData: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    // console.log(this.rowData)
  },
  methods: {
    formatDateTime(dateTime) {
      if (dateTime != null) {
        return moment(dateTime).format('YYYY-MM-DD')
      }
    },
    formatDateTimeYYMM(dateTime) {
      if (dateTime != null) {
        return moment(dateTime).format('YYYY-MM')
      }
    }
  }
};
</script>
<style lang="scss" scope>
//   <div class="user-base-info-box">
//           <div class="descriptions-box">
.user-base-info-box {
  display: flex;

  .descriptions-box {
    flex: 1;
  }

  .user-avatar {
    width: 127px;
    height: 127px;
    border: 1px solid rgb(230, 235, 245);
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
  }
}
</style>
